<template>
	<div class="madp-employee-statistics">
		<div v-if="!showDetail">
			<div class="madp-page-1">
				<el-tree ref="tree" class="filter-tree" :data="treeData" :props="defaultProps" @node-click="handleNodeClick" :expand-on-click-node="false" :default-expand-all="false"></el-tree>
			</div>
			<div class="madp-page-2" v-loading="pageLoading">
				<div class="madp-statistics-data">
					<div class="madp-statistics-title">
						<span>朋友圈数据统计</span>
						<el-popover placement="bottom-start" width="500" trigger="hover">
							<div>
								<p>1.朋友圈总数量；发布的朋友圈总数量</p>
								<p>2.企业朋友圈数：发布的企业朋友圈数量</p>
								<p>3.个人朋友圈数：发布的个人朋友圈数量</p>
								<p>4.点赞数；发布的朋友圈点赞总数</p>
								<p>5.评论数：发布的朋友圈评论数</p>
								<p>6.成员数：企业微信成员的总数量</p>
							</div>
							<el-button type="text" slot="reference" style="margin-left: 20px">
								统计说明
								<i class="el-icon-question"></i>
							</el-button>
						</el-popover>
					</div>
					<statistics-card style="margin-bottom: 20px" :cardInfo="cardInfo" :cardData="basicInfo" />
					<div class="madp-gap-wrap">
						<div class="madp-statistics-table">
							<el-table
								:header-cell-style="{
									background: 'rgb(255, 191, 191)',
									color: 'rgb(44,44,44)',
								}"
								stripe
								:data="dateTableData"
								v-show="tableType === 1"
							>
								<el-table-column label="序号">
									<template slot-scope="scope">{{ (datePagination.current - 1) * datePagination.size + scope.$index + 1 }}</template>
								</el-table-column>
								<el-table-column prop="code" label="机构号">
									<template slot-scope="scope">{{ scope.row.code || '--' }}</template>
								</el-table-column>
								<el-table-column prop="name" label="机构名"></el-table-column>
								<el-table-column prop="momentTotalCount" label="朋友圈总数量"></el-table-column>
								<el-table-column prop="enterpriseMomentCount" label="企业朋友圈"></el-table-column>
								<el-table-column prop="personalMomentCount" label="个人朋友圈"></el-table-column>
								<el-table-column prop="likesCount" label="点赞数"></el-table-column>
								<el-table-column prop="commentsCount" label="评论数"></el-table-column>
								<el-table-column prop="employeeCount" label="成员数量"></el-table-column>
							</el-table>
							<el-table
								:header-cell-style="{
									background: 'rgb(255, 191, 191)',
									color: 'rgb(44,44,44)',
								}"
								stripe
								:data="dateTableData"
								v-show="tableType === 2"
							>
								<el-table-column label="序号">
									<template slot-scope="scope">{{ (datePagination.current - 1) * datePagination.size + scope.$index + 1 }}</template>
								</el-table-column>
								<el-table-column prop="code" label="用户号"></el-table-column>
								<el-table-column prop="name" label="成员名"></el-table-column>
								<el-table-column prop="momentTotalCount" label="朋友圈总数量"></el-table-column>
								<el-table-column prop="enterpriseMomentCount" label="企业朋友圈"></el-table-column>
								<el-table-column prop="personalMomentCount" label="个人朋有圈"></el-table-column>
								<el-table-column prop="likesCount" label="点赞数"></el-table-column>
								<el-table-column prop="commentsCount" label="评论数"></el-table-column>
								<el-table-column prop="employeeCount" label="客户数量"></el-table-column>
								<el-table-column prop="qywxContactCount" label="操作">
									<template slot-scope="scope">
										<el-button type="text" @click="handleView(scope.row)">查看</el-button>
									</template>
								</el-table-column>
							</el-table>
							<!-- 列表分页 -->
							<el-pagination
								background
								v-if="datePagination.total > 0"
								class="madp-black-pagination"
								@size-change="handleSizeChangeByDate"
								@current-change="handleCurrentChangeByDate"
								:current-page="datePagination.current"
								:page-sizes="[10, 20, 30, 50, 100]"
								:page-size="datePagination.size"
								layout="total, sizes, prev, pager, next, jumper"
								:total="datePagination.total"
							></el-pagination>
						</div>
					</div>
				</div>
				<div class="madp-statistics-chart">
					<div class="madp-statistics-title">趋势图</div>
					<div class="madp-gap-wrap">
						<tabsTime ref="tabs1" :form="statisticDimensionTypes" :curDeptId="curDeptId" @changeViews="changeViews1" />
					</div>
				</div>
				<!-- 折线图 -->
				<div id="madp-chart-e9" style="width: 100%; height: 400px; margin: 30px auto" v-show="lineChartOption.xAxis.data && lineChartOption.xAxis.data.length > 0"></div>
			</div>
		</div>
		<div v-if="showDetail">
			<basic-container>
				<BackTitle @goBack="goBack" />
			</basic-container>
			<basic-container>
				<wechatUser :detailInfo="detailInfo" />
			</basic-container>
		</div>
	</div>
</template>
<script>
import { getWechatBasicInfo, getWechatList, WechatTendency } from '@/api/customer/wechat-moments';
import StatisticsCard from '@/components/statistics-card/';
import { fetchTree } from '@/api/admin/dept';
import tabsTime from '@/components/tabs-time-choose';
import wechatUser from './wechat-user.vue';
export default {
	components: {
		StatisticsCard,
		tabsTime,
		wechatUser,
	},
	data() {
		return {
			showDetail: false,
			curDeptId: '',
			pageLoading: false,
			basicInfo: [],
			dimensionType: 1, //维度
			statisticDimensionTypes: [
				{
					label: '朋友圈总数量',
					value: 1,
				},
				{
					label: '企业朋友圈数',
					value: 2,
				},
				{
					label: '个人朋友圈数',
					value: 3,
				},
				{
					label: '点赞数',
					value: 4,
				},
				{
					label: '评论数',
					value: 5,
				},
				{
					label: '成员数',
					value: 6,
				},
			],
			dateTableData: [],
			datePagination: {
				current: 1,
				size: 10,
				total: 0,
			},
			//折线图数据
			lineChartOption: {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						// 坐标轴指示器，坐标轴触发有效
						type: 'line', // 默认为直线，可选为:'line' | 'shadow'
					},
					formatter: '{b}<br>客户总数: {c}条',
				},
				xAxis: {
					type: 'category',
					data: [],
				},
				yAxis: {
					name: '条数',
					type: 'value',
				},
				series: [
					{
						name: '客户总数',
						type: 'line',
						data: [],
						lineStyle: {
							color: '#ED5555',
						},
						itemStyle: {
							color: '#ED5555',
						},
					},
				],
			},
			lineChartData: [],
			cardInfo: [
				{
					label: '朋友圈总数量',
					key: 'momentTotalCount',
					color: '#FFD700',
				},
				{
					label: '企业朋友圈数',
					key: 'enterpriseMomentCount',
					color: 'rgb(123, 215, 0)',
				},
				{
					label: '个人朋友圈数',
					key: 'personalMomentCount',
					color: 'rgb(23, 115, 70)',
				},
				{
					label: '点赞数',
					key: 'likesCount',
					color: '#FF8C00',
				},
				{
					label: '评论数',
					key: 'commentsCount',
					color: '#90EE90',
				},
				{
					label: '成员数',
					key: 'employeeCount',
					color: 'rgb(223, 55, 70)',
				},
			],
			tableType: 1,
			searchForm: {},
			defaultProps: {
				children: 'children',
				label: 'name',
			},
			treeData: [],
			height: '',
			detailInfo: {},
		};
	},
	filters: {},
	created() {
		// dateType默认值为近一周
		this.dateType = 1;
		this.initTree();
	},
	methods: {
		initTree() {
			fetchTree().then((response) => {
				if (response.data.code === 0) {
					this.treeData = response.data.data;
					if (this.treeData.length > 0) {
						this.clickNode = this.treeData;
						this.handleNodeClick(this.treeData[0]);
					}
				}
			});
		},
		// 按日期查看 分页
		handleSizeChangeByDate(val) {
			this.datePagination.size = val;
			this.datePagination.current = 1;
			this.getWechatList(1);
		},
		handleCurrentChangeByDate(val) {
			this.datePagination.current = val;
			this.getWechatList(1);
		},
		handleNodeClick(data) {
			if (data.deptType === 1 && data.parentId === 0) {
				this.$message({
					message: '请点击具体部门查询条线统计数据',
					type: 'info',
				});
				return;
			}
			this.pageLoading = true;
			this.curDeptId = data.id;
			this.tableType = data.children.length > 0 ? 1 : 2;
			getWechatBasicInfo(data.id)
				.then((res) => {
					this.pageLoading = false;
					if (res.data.code != 0) return;
					this.basicInfo = res.data.data;
				})
				.catch(() => {
					this.pageLoading = false;
				});
			this.getWechatList();
		},
		getWechatList(data) {
			if (!data) {
				this.datePagination.current = 1;
				this.datePagination.size = 10;
			}
			let obj = {
				current: this.datePagination.current,
				size: this.datePagination.size,
				deptId: this.curDeptId,
			};
			if (this.tableType === 2) {
				let { EmployeeName, phoneNum, contactName } = this.searchForm;
				if (EmployeeName || phoneNum || contactName) {
					obj = { ...obj, EmployeeName, phoneNum, contactName };
				}
			} else {
				this.searchForm = {};
			}
			this.tableLoading = true;
			getWechatList(obj)
				.then((res) => {
					this.tableLoading = false;
					if (res.data.code != 0) return;
					this.dateTableData = res.data.data.records;
					this.datePagination.total = res.data.data.total;
				})
				.catch(() => {
					this.tableLoading = false;
				});
		},
		changeViews1(obj) {
			if (this.curDeptId != '') {
				WechatTendency(obj).then((res) => {
					if (res.data.code != 0) return;
					let xAxisData = [],
						seriesData = [],
						arr = res.data.data;
					arr.map((item) => {
						xAxisData.push(item.time);
						seriesData.push(item.number);
					});
					this.lineChartOption.xAxis.data = xAxisData;
					this.lineChartOption.series[0].data = seriesData;
					let name = '';
					name = this.statisticDimensionTypes.filter((i) => {
						return i.value === obj.type;
					})[0].label;
					this.lineChartOption.tooltip.formatter = `{b}<br>${name}: {c}`;

					let echarts = require('echarts');

					// 绘制图表
					this.$nextTick(() => {
						// 基于准备好的dom，初始化echarts实例
						let myChart = echarts.init(document.getElementById('madp-chart-e9'));
						myChart.setOption(this.lineChartOption);
						window.addEventListener('resize', function() {
							myChart.resize();
						});
					});
				});
			}
		},
		handleView(data) {
			this.detailInfo = data;
			this.showDetail = true;
		},
		goBack() {
			this.showDetail = false;
		},
	},
};
</script>
<style lang="scss" scoped>
.madp-table-title {
	color: #333;
	font-size: 16px;
}
.madp-statistics-title {
	color: #333;
	font-weight: bold;
	font-size: 20px;
	margin-top: 20px;
}
.madp-statistics-text {
	font-size: 12px;
	color: #666;
	padding-left: 5px;
}

.madp-horizontal-divider {
	width: 100%;
	height: 4px;
	margin: 20px 0;
	background-color: #f0f2f5;
}
.madp-gap-wrap {
	margin-top: 10px;
}
.madp-statistics-tabs {
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.madp-chart-form .el-form-item {
		margin-right: 20px;
		margin-bottom: 0;
	}
	.madp-date-select {
		width: 120px;
	}
	.el-date-editor--daterange.el-input__inner {
		width: 300px;
	}
	/deep/ .el-date-editor .el-range-separator {
		width: 25px !important;
	}
}
.madp-table-user-wrap {
	display: flex;
	align-items: center;
	.madp-table-avatar {
		display: block;
		width: 32px;
		height: 32px;
		object-fit: contain;
		margin-right: 10px;
		border-radius: 4px;
	}
	span.madp-table-avatar {
		background-color: #ed5555;
		text-align: center;
		line-height: 32px;
		color: #fff;
	}
}
/deep/ .el-button--primary.is-plain {
	background-color: #fff;
	border-color: #ed5555;
}
.madp-black-pagination {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	margin-top: 10px;
}
.madp-fle {
	margin-top: 20px;
	justify-content: flex-end;
}
.madp-page-left {
	overflow-x: auto;
}
.filter-tree {
	overflow: auto;
	padding: 10px;
	min-width: fit-content;
	width: 100%;
}
.madp-page-1 {
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	border-radius: 6px;
	width: 13%;
	margin-left: 10px;
	overflow: auto;
	position: fixed;
	background: #fff;
	height: calc(100vh - 7rem);
}
.madp-page-2 {
	overflow: auto;
	float: right;
	background: #fff;
	padding: 0px 20px;
	width: 84%;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	border-radius: 6px;
	/deep/ .el-card__body {
		padding: 0 20px;
	}
}
</style>
